/*
  学习目标：JSX-插值表达式 -  数组和对象
  特点： 可以放在等号右边的都是表达式
  1. 变量、 
  2. 基础数据类型： 字符串、 number、boolean 、undefined null、
  3. 引用数据类型： 数组、 对象、函数
  4. 其它： 三元表达式、 逻辑运算符、  JSX本身
*/

import React from 'react';
import ReactDOM from 'react-dom';

const person = {
  type: '张三',
  age: 18,
  children: {
    name: '小张三',
  },
};

// 2. 数组内的每个元素都会做dom节点，直接渲染出来
const list = [1, 2, 3];
const list2 = [<i>1</i>, <i>2</i>, <i>3</i>];

const divNode = (
  <div>
    {/* 1.💥对象数据类型，不能直接放在插值表达式中 */}
    {person.age}
    {/* 会直接报错 */}
    {/* {person.children} */}
    <h1>{list}</h1>
    <h2>123</h2>
    <h3>{list2}</h3>
  </div>
);

console.log('divNode  ----->  ', divNode);

ReactDOM.render(divNode, document.getElementById('root'));
